Ext.onReady(function() {
	Ext.Loader.setConfig({
		enabled : true
	});
	
	Ext.define('LoginMain', {
		extend: 'Ext.Component',
		NORMAL_IMG :  "/view/images/checkbox_normal.png",
		CHECKED_IMG: "/view/images/checkbox_checked.png",
		usernametips : '请输入您的账号',
		pwdtips : '',
		childEls: ['username', 'pwd', 'hiddenEl', 'checkEl', 'labelEl'],
		renderTpl : new Ext.XTemplate(
			'<div id="dl">',
				'<div class="login_title"><span>登录</span></div>',
				'<div class="error"><img id="error_img" src="'+'/view/images/login_error.png" style="display:none;"/><label id="msg"></label></div>',
				'<div class="zh" style="background:url('+'/view/images/30alpha.png)"><img src="'+'/view/images/login_user.png"></div>',
				'<input name="textfield" id="{id}-username" type="text" class="input" value="{usernametips}">',
				
				'<div class="mm" style="background:url('+'/view/images/30alpha.png)"><img src="'+'/view/images/login_pwd.png"></div>',
				'<input name="textfield" id="{id}-pwd" class="inputpwd" type="password" value="{pwdtips}">',
	           
				'<div class="load"><div class="checkbox_login">' +
					'<img id="{id}-checkEl" src="{imgPath}" style="vertical-align:middle;height:19px;width:19px;border:none;cursor:hand;"/>',
					'<span id="{id}-labelEl" style="margin-left: 14px;cursor:hand;">记住密码</span>',
					'<input id="{id}-hiddenEl" type="checkbox" style="width:0px;height:0px;border:none;display:none;"/>',
				'</div></div>',
									
				'<input class="btn" onfocus="this.blur()" type="button" name="Submit" value="登录">',
			'</div>'
		),
		initComponent:function(){
			var me = this;
			this.renderData={
				usernametips: me.usernametips,
				pwdtips: me.pwdtips,
				imgPath: me.NORMAL_IMG
			};
			
			me.callParent();	
		},
		onRender:function(ct, position){
			var me = this;
			me.callParent();			
			
			var username = Ext.util.Cookies.get('username');
			var password = Ext.util.Cookies.get('pwd');
			if(username != null && username != '' && username != me.usernametips){
				me.username.dom.value = username;
				me.pwd.dom.value=password;
				me.setValue(true);
			}
			
			me.mon(me.el, 'click', me.onClick, me);
			me.mon(me.username, 'focus', me.onFocus, me);
			me.mon(me.username, 'blur', me.onBlur, me);
			me.mon(me.pwd, 'focus', me.onFocus, me);
			me.mon(me.pwd, 'blur', me.onBlur, me);
			me.mon(me.pwd, 'keyup', me.onKeyup, me)
			me.initListeners();
		},
		initListeners: function(){
			var me = this;
			/**
			 * keydown
			 */
			me.mon(me.hiddenEl, 'keydown',function(e){
				if(e.button == 12){
					me.toggleChecked();
					me.fireEvent('change', me, e);
				}
				
			}, me);
			
			/**
			 * mouseout
			 */
			me.mon(me.checkEl, 'mouseout', function(e){
				if(!me.checked){
					me.checkEl.dom.src = me.NORMAL_IMG;
				}
			}, me);
			/**
			 * click
			 */
			me.mon(me.checkEl, 'click', function(e){
				me.toggleChecked();
				me.fireEvent('change', me, e);
			}, me);
			me.mon(me.labelEl, 'click', function(e){
				me.toggleChecked();
				me.fireEvent('change', me, e);
			}, me);
		},
		toggleChecked: function(){
			var me = this;
			me.checked = !me.checked;
			if(me.checked){
				me.checkEl.dom.src = me.CHECKED_IMG;
			}
			else{
				me.checkEl.dom.src = me.NORMAL_IMG;
			}
			me.saveUsername(me.checked);
		},
		setValue: function(v){
			var me = this;
			me.checked = false;
			if(!Ext.isEmpty(v)){
				if(Ext.isNumber(v) && v){
					me.checked = true;
				}
				else if(Ext.isBoolean(v) && v){
					me.checked = true;
				}
			}
			if(me.checked && me.disabled){
				me.checkEl.dom.src = me.DISABLED_CHECKED_IMG;
			}
			else if(me.checked && !me.disabled){
				me.checkEl.dom.src = me.CHECKED_IMG;
			}
			else if(!me.checked && me.disabled){
				me.checkEl.dom.src = me.DISABLED_IMG;
			}
			else{
				me.checkEl.dom.src = me.NORMAL_IMG;
			}
			
			me.fireEvent('change', me, Ext.EventManager.idleEvent);
		},
		
		getValue: function(){
			return this.checked;
		},
		onKeyup:function(e){
			var me = this;
			var keycode;
			if(Ext.isIE){
				keycode = e.keyCode;
			}
			else{
				if(Ext.isChrome){
					keycode = e.button;		
				}
			else{
					keycode = e.which;	
				}
				
			}
			if(keycode == undefined){
				return;
			}
			//Enter
			if(Ext.isChrome){
				if(keycode == 12){
					me.login();
				}	
			}
			else{
				if(keycode == 13){
					me.login();
				}
			}
			
		},
		saveUsername:function(checked){
			var me = this;
			if(checked){
				var now = new Date();
	   			var expiry = new Date(now.getTime() + 365 * 24 * 60 * 60 * 1000);
				Ext.util.Cookies.set('username', me.username.dom.value, expiry);	
				Ext.util.Cookies.set("pwd", me.pwd.dom.value, expiry);
			}
			else{
				Ext.util.Cookies.clear('username');
				Ext.util.Cookies.clear("pwd");
			}
		},
		onClick:function(e){
			var me = this;
			var prelanguage = me.curlanguage;
			//process for language switch
			if(e.target.tagName == 'A'){
				me.switchLanguage(e);
			}
			//process for login
			else if(e.target.tagName == 'INPUT'){
				if(e.target.type == 'button'){
					me.login();	
				}
				else 
				{
					Ext.getDom('msg').innerHTML = '';
					Ext.getDom('error_img').style.display = 'none';
				}
			}
			else if(e.target.tagName == 'SPAN'){
				if(Ext.get(e.target).parent('div').dom.className == 'login_tips'){
					me.switchLogin(e);	
				}
			}
		},
		onFocus:function(e){
			var me = this;
			if(e.target.id == me.id + '-username' && e.target.value == me.usernametips){
				e.target.value = '';
			}
			else if(e.target.id == me.id + '-pwd' && e.target.value == me.pwdtips){
				e.target.value = '';
			}
			e.target.style.color = '#000';
			me.fireEvent('focus', me, e);
		},
		onBlur:function(e){
			var me = this;
			if(e.target.value == ''){
				if(e.target.id == me.id + '-username'){
					e.target.value = me.usernametips;	
				}
				else if(e.target.id == me.id + '-pwd'){
					e.target.value = me.pwdtips;
				}
				e.target.style.color = '#999';
			}
			
			me.fireEvent('blur', me, e);
		},
		login: function(){
			var me = this;
			var username = me.username.dom.value;
			var pwd = me.pwd.dom.value;
			if(username == '' || username == me.usernametips)
			{
				Ext.getDom('msg').innerHTML = '账号不能为空，请重新输入！';
				Ext.getDom('error_img').style.display = '';
				return;
			}
			else if(pwd == '' || pwd == me.pwdtips)
			{
				Ext.getDom('msg').innerHTML = '密码不能为空，请重新输入！';
				Ext.getDom('error_img').style.display = '';
				return;
			}
			
			var loadMask = new Ext.LoadMask(Ext.getBody(), {msg:'正在登录中，请稍后'});
			loadMask.show();
			
			var now = new Date();
			if(me.checked){
				var expiry = new Date(now.getTime() + 365 * 24 * 60 * 60 * 1000);
				Ext.util.Cookies.set('username', me.username.dom.value, expiry);	
				Ext.util.Cookies.set("pwd", me.pwd.dom.value, expiry);
			}
			
			Ext.Ajax.request({
				url: '/user/login',
				type : 'POST',
				params:{
					'userName' : username,
					'password' :pwd
				},
				callback : function(options, success, response) {
					if (success) {
						var result = Ext.decode(response.responseText);
						if (result.success) 
						{
							location.href = "/index";
						} else {
							Ext.Msg.alert("错误", '用户名或密码错误');
						}
						loadMask.hide();
					}
					else 
					{
						loadMask.hide();
						Ext.Msg.alert("网络错误", '请联系管理员');
					}
				}
			});
		}
	});
	
	Ext.create('LoginMain', {
		renderTo : Ext.get('login_content')
	});
});